<style type="text/css">
    body,#container,.content{
      margin: 0;
    }
    
    body,ul,div,img,h5,h4,h3,h2,h1,p,span,table,figure,i,em,tt,li{
      list-style:none;
      margin:0;
      padding:0;
    }
    
    .info-title{
      color: white;
      font-size: 14px;
      background-color: rgba(0,155,255,0.8);
      line-height: 26px;
      padding: 0px 0 0 6px;
      font-weight: lighter;
      letter-spacing: 1px;
    }
    
    .info-content{
      padding: 4px;
      color: #666666;
      line-height: 23px;
    }
    
    .info-content img{
      float: left;
      margin: 3px;
    }
    
    .cb{ clear: both;}
    #logo_zhuang {
      background-color: #FFF;
      color: #333;
      box-shadow: none;
      position: absolute;
      top: 30px;
      left: 20px;
      border-radius: 5px;
      overflow: hidden;
      line-height: 40px;
      height: 50px;
      cursor: pointer;
      padding-right:10px;
    }
    
    .img_btn{
      height: 40px;
      width: 45px;
      border: 0px;
      float: left;
      /*margin-top:5px;*/
      margin-top: 2px;
      border-right:1px dashed #e2e7ed;
      background-repeat: no-repeat;
      background-position: center;
      /*background-image: url("./assets/img/map_logo.jpg");*/
      /*background-image: url("./assets/img/guizhoulogo_small.png");*/
      }

      #logo_zhuang input[type="text"] {
      float: left;
      height: 30px;
      border: 0;
      padding-left: 5px;
      width: 240px;
      margin-top:10px;
      margin-left:10px;
      border-radius:5px;
      border:1px solid #e1e8f0;
      font-size: 17px;
      border-radius: 3px;
      line-height: 30px;
      background-color: #FFF;
      background: url("./assets/img/search.png") no-repeat right;
      background-position: 95% 50%;
    }

    #address_search{
      background-color: #FFF;
      color: #333;
      box-shadow: none;
      position: absolute;
      top: 50px;
      left: 345px;
      border-radius: 5px;
      overflow: hidden;
      line-height: 50px;
      height: 50px;
      width: 60px;
      text-align: center;
      font-size: 17px;
      cursor: pointer;
    }
    #site_pre{width: 220px; height: 0px; padding: 0px; border:1px solid #7d7d7; position: absolute;top: 95px;left: 30px; z-index:99;}
    #site_pre .site_state{ width: 100%;background: #FFF; height: 150px; display: none;}
    #site_pre .site_state ul{ width: 100%;}
    #site_pre .site_state ul li{list-style: none; height: 25px; line-height: 25px; margin-top: 10px; cursor: pointer;}
    #site_pre .site_state ul li a{ text-decoration: none; font-size: 14px; display: block;}
    #site_pre .site_state ul li a span{ margin-left: 20px; color: #5bad44;}
    #site_pre .site_state ul li a img{ position: absolute;left: 20px; margin-top: 5px;}
    /*#site_pre .site_state ul li a div{ margin-left: 20px}*/
    #site_pre .site_state ul li a div.wenzi{ font-size: 14px; position: absolute; left:50px;}
    #site_pre .site_state ul li a div.num{ position:absolute; right:20px;padding:0px 10px; float: right; border-radius: 5px; color: #eef7ec; text-align: center; }
    .selected a{color: #5bad44;}
    .selected a div.num{background:#5bad44;}
    .noselected a{color: #c4c4c4;}
    .noselected a div.num{background:#c4c4c4;}

    #site_pre .site_user_sta{ width: 100%; height: 220px; margin-top: 5px; background: #FFF; display: none;}
    #site_pre .site_user_sta .title{ width: 100%; text-align: center; padding-top: 10px; color: #333333;}
    #site_pre .site_user_sta ul{ width: 100%;}
    #site_pre .site_user_sta ul li{ list-style: none; height: 20px; line-height: 20px; margin-top: 10px; cursor: pointer;}
    #site_pre .site_user_sta ul li div .shouqi{ display:inline-block; border:1px solid #cccccc;  padding:2px 10px; margin-left:10px; width:24px; height:7px; background:url("__PUBLIC__/img/shouqi.png") no-repeat; background-position:50% 50%}
    #site_pre .site_user_sta ul li div .shouqi:hover{ border:1px solid #00F; color:#FFF;}
    #site_pre .site_user_sta ul li img{ position: absolute;left: 20px;  }
    #site_pre .site_user_sta ul li div{position: absolute;left: 50px; color: #333333;}

    .search_site_box{ width:320px; height:0px; display:none;border:1px solid #FFF; position:fixed; left:30px; top:110px; z-index:20;}
    .search_site_box ul{display:none; background:#FFF; height:250; width:100%; border-bottom:1px solid #e4e4e4;}
    .search_site_box ul li{ height:30px; cursor:pointer; line-height:30px; font-size:17px; padding-left:30px; color:#999999;}
    .search_site_box .page_btn{ display:none; background:#FFF; height:49px; width:100%; line-height:49px; font-size:16px;}
    .search_site_box .page_btn .current_page{ margin-left:20px;}
    .search_site_box .page_btn a{ cursor:pointer;}
    .search_site_box .page_btn .back_page{ margin-left:20px;}
    .search_site_box .page_btn .next_page{ margin-left:20px;}

    .markerW{  height:200px; background:#FFF; border-radius:3px; }
    .markerW .title{margin:0 auto; text-align:center; height:50px; line-height:50px; font-size:18px; color:#282828; border-bottom:1px solid #e4e4e4;}
    .markerW ul{ width:240px; margin:0 auto;}
    .markerW ul li{ line-height:25px; height:25px; color:#666666; padding-left:10px;}
    .markerW ul li.last_li{ text-align:center; color:#00b7ed; padding-top:15px;}
    .markerW ul li.last_li a{ text-decoration:none; color:#00b7ed;}
    .markerW ul li span{ display:inline-block;}
    .markerW ul li span.num{ float:right; margin-right:10px;}

    .location{height:16px; margin-bottom:20px; font-size:12px;}
    .location .bread>img{float:left;position: relative;top: 2px; margin-right:5px;}
    .location .bread>a{font-size:14px;margin-left: 15px;color:#61A1E8; cursor:pointer;float:right}
    .location .bread>a:hover{color:#FF9348};
    .location .bread div{ float:left;font-size:12px; margin-left:7px; color:#333333;}
    .location .bread div>img{margin:0px 5px;}
    .location .bread div a{ text-decoration:none; color:#61A1E8;}
     #tip {
            background-color: #ddf;
            color: #333;
            border: 1px solid silver;
            box-shadow: 3px 4px 3px 0px silver;
            border-radius: 5px;
            overflow: hidden;
            line-height: 20px;
            
        }
        #tip input[type="text"] {
            height: 25px;
            border: 0;
            padding-left: 5px;
            width: 280px;
            border-radius: 3px;
            outline: none;
            margin-top: 11px;
            background-image: url("./assets/img/search.png"); 
            background-repeat: no-repeat;
            background-position: right;
        }
        .wraping{
         /*height: 600px;*/
          position: relative;
         /* margin: 0 0 115px;*/

        }
        
        .scrolldiv{
          
            position: absolute;
            top: 30px;
            left: 20px;
        }
        .map-Capacity{
          position: absolute;
          top: 80px;
          left: 65px;
        }
        .site_user_sta{
          position: absolute;
          background: #fff;
          z-index: 999;
          top: 80px;
          left: 20px;
          display: none;
          padding: 10px 20px;
          -moz-box-shadow:1px 1px 5px #333333; 
          -webkit-box-shadow:1px 1px 5px #333333;    
          box-shadow:1px 1px 5px #333333;

        }
        .img_btn{
          cursor: pointer;
        }

        .site_user_sta li{
          margin: 15px 0;
        }
        .site_user_sta ul li img, .site_user_sta ul li div{
          display: inline-block;
        }
        .site_user_sta ul li div{
          vertical-align: middle;
          margin-left:10px; 
        }
        .site_user_sta ul{
          padding-left: 15px;
        }
        .amap-adcombo-close{
          background:url(http://ditu.amap.com/assets/img/iw-close.png) center center no-repeat;
        }
        .amap-adcontent-body{
          width: 320px;
        }
        .amap-info-combo .search-button{
          background: url(http://webapi.amap.com/theme/v1.3/images/amap-info.png) 7px -197px no-repeat #0091ff;
        }

</style>
  
<body>

	<div id="container"></div>
	
	<!-- <div style="position: relative;"> -->
	<div id="tip" class="scrolldiv">
	    <div class="img_btn" id="map_config"></div>
	    <input type="text"  ng-model="searchModel" placeholder="请输入站点名称" 
      />
	    <br/>
	    <div class="img_btn2"></div>
	</div>
	
	<div class="map-Capacity">
	<select multiple="multiple" ng-model="selectedStation" ng-change="changeSearch(selectedStation);" 
	  ng-if="!!searchStationList" style="width: 280px;height:300px;">
	    <option value="{{$index}}" ng-repeat="station in searchStationList track by $index"
	    >{{station.station_name}}</option>
	</select>
	</div>
     
  <div class="site_user_sta">
    <div class="title">图标解释(充电次数)</div>
      <ul>
        <li><img src="./assets/img/red.png" width="15px" height="20px" alt=""><div>大于200次</div></li>
        <li><img src="./assets/img/map_maker_2.png" width="15px" height="20px" alt=""><div>150~200次</div></li>
        <li><img src="./assets/img/map_maker_3.png" width="15px" height="20px" alt=""><div>100~150次</div></li>
        <li><img src="./assets/img/map_maker_5.png" width="15px" height="20px" alt=""><div>50~100次</div></li>
        <li><img src="./assets/img/map_maker_4.png" width="15px" height="20px" alt=""><div>小于50次</div></li>
<!--         <li><img src="./assets/img/map_maker_3.png" width="15px" height="20px" alt=""><div>使用一般(50~100)</div></li>
        <li><img src="./assets/img/map_maker_4.png" width="15px" height="20px" alt=""><div>使用较少(10~50)</div></li>
        <li><img src="./assets/img/map_maker_5.png" width="15px" height="20px" alt=""><div>使用最少(10) </div></li> -->
      </ul>
  </div>
<script type="text/javascript">
  //调用locationConfig.js
  replaceConfigfunction();
	//fix map canvas height issue
	var canvasHeight = $(window).height() - 230;
	$("#container,.wraping").css("min-height", canvasHeight);
	
	$(window).resize(function(){
		canvasHeight = $(window).height() - 230;
		$("#container,.wraping").css("min-height", canvasHeight);
	});
	
	
	$('.img_btn').click(function(){
	    if(!$(".site_user_sta").is(":hidden")){
	        $('.site_user_sta').hide();
	    }else{
	      $('.site_user_sta').show();
	    }
	 })
</script>
</body>
